<template>
  <div>
    <n-grid cols="1 s:2 m:3 l:4 xl:6 2xl:7" responsive="screen" x-gap="20" y-gap="20">

      <n-grid-item v-for="(s, i) in series">
        <mini-chart :options="chart.chartOptions" :series="s"></mini-chart>
      </n-grid-item>

      <n-grid-item v-for="(s, i) in series2">
        <mini-chart :options="chart2.chartOptions" :series="s"></mini-chart>
      </n-grid-item>

      <n-grid-item v-for="(s, i) in series3">
        <mini-chart :options="chart3.chartOptions" :series="s"></mini-chart>
      </n-grid-item>

      <n-grid-item v-for="i in 6">
        <data-tag style="height:50px;"></data-tag>
      </n-grid-item>

      <n-grid-item v-for="i in 2" :span="3">
        <data-tag style="height:50px;"></data-tag>
      </n-grid-item>

      <n-grid-item :span="3">
        <mini-chart :options="chart.chartOptions" :series="series[0]" :height="200"></mini-chart>
      </n-grid-item>

      <n-grid-item :span="3">
        <mini-chart :options="chart2.chartOptions" :series="series2[0]" :height="200"></mini-chart>
      </n-grid-item>

      <n-grid-item :span="6">
        <div class="theme_box" style="padding:10px;">
          <div style="margin-bottom: 8px;">
            <n-button secondary type="primary" style="margin-right:5px;">
              添加
            </n-button>
            <n-button secondary type="default" style="margin-right:5px;">
              编辑
            </n-button>
            <n-button secondary type="error" style="margin-right:5px;">
              删除
            </n-button>
          </div>

          <n-data-table :columns="columns" :data="tableData" :bordered="false" :size="'large'"
            :pagination="pagination" />
        </div>
      </n-grid-item>
    </n-grid>
  </div>
</template>
<script lang="tsx" setup>
import { reactive, ref, onMounted, h } from "vue";
import MiniChart from './components/miniChart.vue';
import DataTag from '@/components/dataTag.vue';
import { NTag, NButton, DataTableColumns } from 'naive-ui'

let chart = reactive({
  chartOptions: {
    chart: {
      type: 'area',
      width: 40,
      height: 160,
      sparkline: {
        enabled: true
      },
    },
    stroke: {
      curve: 'straight'
    },
    fill: {
      opacity: 0.3
    },
    xaxis: {
      crosshairs: {
        width: 1
      },
    },
    yaxis: {
      min: 0
    },
    title: {
      text: '$135,965',
      offsetX: 0,
      style: {
        fontSize: '24px',
      }
    },
    subtitle: {
      text: 'Profits',
      offsetX: 0,
      style: {
        fontSize: '14px',
      }
    }
  },

  series: [],
})

let chart2 = reactive({
  series: [],
  chartOptions: {
    chart: {
      type: 'bar',
      width: 100,
      height: 35,
      sparkline: {
        enabled: true
      }
    },
    plotOptions: {
      bar: {
        columnWidth: '80%'
      }
    },
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
    xaxis: {
      crosshairs: {
        width: 1
      },
    },
    tooltip: {
      fixed: {
        enabled: false
      },
      x: {
        show: false
      },
      y: {
        title: {
          formatter: function (seriesName) {
            return ''
          }
        }
      },
      marker: {
        show: false
      }
    },
    title: {
      text: '$135,965',
      offsetX: 0,
      style: {
        fontSize: '24px',
      }
    },
    subtitle: {
      text: 'chart2',
      offsetX: 0,
      style: {
        fontSize: '14px',
      }
    }
  },
})

let chart3 = {
  series: [53, 67],
  chartOptions: {
    chart: {
      type: 'radialBar',
      width: 40,
      height: 40,
      sparkline: {
        enabled: true
      }
    },
    dataLabels: {
      enabled: false
    },
    plotOptions: {
      radialBar: {
        hollow: {
          margin: 0,
          size: '50%'
        },
        track: {
          margin: 1
        },
        dataLabels: {
          show: false
        }
      }
    },
    title: {
      text: '$135,965',
      offsetX: 0,
      style: {
        fontSize: '24px',
      }
    },
    subtitle: {
      text: 'chart3',
      offsetX: 0,
      style: {
        fontSize: '14px',
      }
    }
  },
}

let series = [
  [{ data: new Array(20).fill('').map(() => Math.random() * 4) }],
  [{ data: new Array(20).fill('').map(() => Math.random() * 5) }],
]

let series2 = [
  [{ data: new Array(20).fill('').map(() => Math.random() * 2) }],
  [{ data: new Array(20).fill('').map(() => Math.random() * 4) }],
]

let series3 = [
  new Array(2).fill('').map(() => Math.random() * 50),
  new Array(2).fill('').map(() => Math.random() * 100)
]


type RowData = {
  key: number
  name: string
  age: number
  address: string
  tags: string[]
}

const createColumns = ({
  sendMail
}: {
  sendMail: (rowData: RowData) => void
}): DataTableColumns<RowData> => {
  return [
    {
      title: 'Name',
      key: 'name'
    },
    {
      title: 'Age',
      key: 'age'
    },
    {
      title: 'Address',
      key: 'address'
    },
    {
      title: 'Tags',
      key: 'tags',
      render(row) {
        const tags = row.tags.map((tagKey) => {
          return h(
            NTag,
            {
              style: {
                marginRight: '6px'
              },
              type: 'info',
              bordered: false
            },
            {
              default: () => tagKey
            }
          )
        })
        return tags
      }
    },
    {
      title: 'Action',
      key: 'actions',
      render(row) {
        return h(
          NButton,
          {
            size: 'small',
            onClick: () => sendMail(row)
          },
          { default: () => 'Send Email' }
        )
      }
    }
  ]
}

const createData = (): RowData[] => [
  {
    key: 0,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer']
  },
  {
    key: 1,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['wow']
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher']
  }
]

let tableData = createData();
let columns = createColumns({
  sendMail(rowData) {
  }
});

let pagination = {
  pageSize: 10
}


</script>